/*
 * @Date: 2022-03-29 12:40:57
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 21:19:57
 * @FilePath: /payment/pay/src/pages/Tenant/TenantRecord.jsx
 */
import React,{useState,useEffect} from 'react'
import Tab from '../../components/Tabs'
import { DatePicker, Input,Form,Button,Row, Col, Table,Modal, Select,ConfigProvider } from 'antd';
import style from './recharge.module.css'
import { SearchOutlined,ExportOutlined } from '@ant-design/icons';
// 引入样式
import myStyle from './../AgencyPay/CSS/AgencyPayOrder.module.css'
import zhCN from "antd/es/locale/zh_CN";

import axios from '../../util/axios'

import Export from './Export';
const { RangePicker } = DatePicker;
const { Option } = Select;

//商户充值记录
export default function TenantRecord() {
  //分页
  let [pag,setPag]=useState({current:1,pageSize:5,pageSizeOptions:[5,10,20],showSizeChanger:true,showQuickJumper:true,onChange:changePage})
  
   //表格数据
   let [data, setData] = useState()
   //是否为全部的数据
   let [isAll,setIsAll]=useState(true)
   let [form1]=Form.useForm()
   useEffect(() => {
     
     if(isAll){
       axios({
         url: '/chongZhiMingXi',
         method: 'get',
         params: {
           limit: pag.pageSize.toString(),
           name: JSON.parse(localStorage.getItem('user')).uName,
           page: pag.current.toString()
         },
       }).then(res => {
         console.log(res);
         if (res.code === 200) {
           setData(res.data.map(item => ({ ...item, key: item.liuShuiHao })))
           setPag({ ...pag, total: res.count })
           setIsAll(true)
         }
       })
     }else{
       form1.submit()
       console.log('执行表单提交')
     }
     
   }, [pag.current,isAll])
  const onFinish = (values) => {
    console.log('Success:', values);
    const rangeValue = values.time
    //时间格式转换
    values = {
      ...values,
      time: rangeValue&&[rangeValue[0].format('YYYY-MM-DD hh:mm:ss'), rangeValue[1].format('YYYY-MM-DD hh:mm:ss')]
    }

    //搜索
    axios({
      url: '/chongZhiMingXi',
      method: 'get',
      params: {
        limit: pag.pageSize.toString(),
        name: JSON.parse(localStorage.getItem('user')).uName,
        page: pag.current.toString(),
        start:values.time&&values.time[0],
        end:values.time&&values.time[1],
        liuShuiHao:values.serial
      },
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        setIsAll(false)
      }
    })

  };

  //页数更改时
  function changePage(page,pageSize){
    setPag({...pag,current:page,pageSize})
  }

 
 
  const columns = [
    {
      title: '充值类型',
      dataIndex: 'chongZhiLeiXing',
      key: 'chongZhiLeiXing',
      sorter: {
        compare: (a, b) => a.type - b.type,
        multiple: 2,
      },
      render:(text)=>{
        return  text==='商户'?<span style={{color:"#5c5"}} >商户</span>:
                text==='代理'?<span style={{color:"#20f"}}>代理</span>:
                text==='管理员'?<span style={{color:"#ff0"}}>管理员</span>:''
        }
    },
    {
      title: '充值流水号',
      dataIndex: 'liuShuiHao',
      key: 'liuShuiHao',
    },
    {
      title: '商户名称',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    {
      title: '商户号',
      key: 'name',
      dataIndex: 'name',
      
    },
    {
      title: '实际金额',
      dataIndex: 'shiJiBianHuaJinE',
      key: 'shiJiBianHuaJinE',
    },
    {
      title: '变动前金额',
      dataIndex: 'bianHuaQianJinE',
      key: 'bianHuaQianJinE',
    },
    {
      title: '充值金额',
      key: 'bianHuaJinE',
      dataIndex: 'bianHuaJinE',
      
    },
    
    {
      title: '变动后金额',
      dataIndex: 'bianHuaHouJinE',
      key: 'bianHuaHouJinE',
    },
    {
      title: '手续费',
      key: 'feiLvMoney',
      dataIndex: 'feiLvMoney',
      
    },
    {
      title: '操作人',
      key: 'caoZuoRen',
      dataIndex: 'caoZuoRen',
      
    },
    
  ];
  
  // const data = [
  //   {
  //     key: '1',
  //     recSerialNum:'1546543535',
  //     type:1,
  //     userName:'test',
  //     userCard:'123456',
  //     recnum: 200,
  //     orderId: '31213435442',
  //     oldNum: 1000,
  //     newNum: 1200,
  //     serviceCharge:20,
  //     operator:'test'
  //   },
  // ];
  return (
    <div>
      <Tab title="商户充值记录"/>
      <Form
      name="basic"
      form={form1}
      onFinish={onFinish}
      autoComplete="off"
      layout='inline'
      className={style.content}
    >
      <Form.Item name="serial">
        <Input placeholder="流水号"/>
      </Form.Item>
      <Form.Item name='time'>
        <RangePicker showTime placeholder={['开始日期','结束日期']}/>
      </Form.Item>

      <Form.Item >
        <Button type="primary" htmlType="submit" onClick={() => {
              setPag({ ...pag, current: 1 })
          }} icon={<SearchOutlined />}>
          搜索
        </Button>
      </Form.Item>
      <Form.Item >
        <Export data={data} header={columns} fileName='商户充值记录.xlsx'/>
      </Form.Item>
      <Form.Item >
          <Button type="primary" onClick={()=>{
            setIsAll(true);
            setPag({...pag,current:1});
            }
            }>
            查看全部
          </Button>
        </Form.Item>
    </Form>
    <div className={style.content}>
    <ConfigProvider locale={zhCN}>
      {/* <Row className={myStyle.row_padding}>
        <Col span={6} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>充值总金额</span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={100} />
          </span>
        </Col>
        <Col span={6} className={myStyle.col_style}>
          <span className={myStyle.col_first_span}>充值手续费
          </span>
          <span className={myStyle.col_second_span}>
            <Input className={myStyle.col_input} disabled
              value={200}
            />
          </span>
        </Col>
      </Row> */}
      <Table columns={columns} dataSource={data} pagination={pag} />
      </ConfigProvider>
    </div>
    </div>
  )
}
